<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>配网监控系统</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<link rel="stylesheet" type="text/css"
			href="<s:url value='../css/main.css'/>">
		<link rel="stylesheet" type="text/css"
			href="<s:url value='../jquery-easyui/themes/stategrid/easyui.css'/>">
		<link rel="stylesheet" type="text/css"
			href="<s:url value='../jquery-easyui/themes/icon.css'/>">
		<script type="text/javascript"
			src="<s:url value='../jquery-easyui/jquery-1.7.2.min.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../jquery-easyui/jquery.easyui.min.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../jquery-easyui/locale/easyui-lang-zh_CN.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../js/common/commonUtil.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../js/common/datagridCommon.js'/>"></script>

		<style type="text/css">
.queryTable {
	width: 32.5%;
}

.combo {
	width: 200px;
	margin-left: 6px;
	margin-right: 4px;
	color: #888888;
}
</style>

		<script type="text/javascript"><!--
		$(function(){
			var datagridId = "terminalDatagrid"; // 数据集对应table的id
			var listUrl = "../archives/showTerminals.action"; // 请求数据集的action
			var title = "终端信息"; // 数据集的标题
			var columns = [[
					{field: 'terminalId', hidden: true},
					{field: 'lineId', hidden: true},
					{field: 'terminalAddr', title: '终端地址', width: 40},
					{field: 'mode', title: '通信模式', width: 30,formatter: function(value,row,index){
						if (value == "0"){
							return "TCP";
						} else if (value == "1"){
							return "UDP";
						} else if (value == "2") {
							return "GPRS";
						} else if (value == "3") {
							return "拨号";
						} else {
							return value;
						}
					}},
					{field: 'heartBeatPeriod', title: '心跳周期', width: 30},
					{field: 'timeOut', title: '超时时间', width: 30},
					{field: 'ip', title: '主站IP', width: 50},
					{field: 'port', title: '主站端口', width: 30},
					{field: 'wirelessAddr', title: '无线模块地址', width: 40},
					{field: 'location', title: '地理位置', width: 75},
					{field: 'lineName', title: '所属线路', width: 50},
					{field: 'stationName', title: '所属供电所', width: 50},
					{field: 'bureauName', title: '所属供电局', width: 50},
					{field: 'opt', title: '查看', width: 25, formatter: function(value,row,index){
						return s = '<a href="#" mce_href="#" onclick="alert(\'查看\');">查看</a> ';   
					}}
				]]; // 数据集的列信息，列标题，对应的内容和宽度
		    
		    /**
		     *编辑参数，新增和编辑共用同一个表单，在编辑操作和新增操作中这些参数是一样的
		     *modalWinId：彈出窗口id
		     *submitBtnId： 提交按鈕id
		     *formId：表單id
		     *msgFlag：請求action，返回消息對應的屬性
		     ***/
		    var editParams = {
    				modalWinId: "addOrEditWin", 
    				submitBtnId: "addOrEditBtn",
    				formId: "form",
    				msgFlag: "msg"
		    	};	
		    	
		    var addParams = {
    				addUrl: "../archives!addOrModifyTerminal.action"
				};// 新增操作参数，包括新增操作请求地址
		    var modifyParams = {
		    		loadUrl: "../archives/loadTerminalByPk.action",
		    		identityId: ["terminalId","lineId"],
		    		modifyUrl: "../archives!addOrModifyTerminal.action"
		    	};// 修改操作参数，包括修改操作请求地址
		    
		    // 删除操作参数，包括删除操作请求地址，行唯一主键，请求action，返回消息对应的json属性
		    var removeParams = {
		    		removeUrl: "../archives!removeTerminalById.action", 
    				identityId: "terminalId",
    				msgFlag: "msg"
    			};

			/**
			*查询操作参数
			*queryFormId：查询表单id
			*queryBtnId：查询按钮id
			*/
			var queryParams = {
				queryFormId: "queryForm",
				queryBtnId: "queryBtnFunc"
			}
			
			//显示表单
			showDataGrid(datagridId, listUrl, title, columns, editParams, addParams, removeParams, queryParams, modifyParams);
			
			// 级联列表需要配置如下参数，上级id和级联的url
			$("#stationId", "#form").attr("higherCascadeId", "bureauId");
			$("#stationId", "#form").attr("comboboxUrl", "../archives/showStationsBelonged.action");
			
			// 级联列表需要配置如下参数，上级id和级联的url
			$("#lineId", "#form").attr("higherCascadeId", "stationId");
			$("#lineId", "#form").attr("comboboxUrl", "../archives/showLinesBelonged.action");
			
			// 点击组织树，刷选终端信息
			$('#tree').tree({
				onClick: function(node){
					var node = $('#tree').tree('getSelected');  //tt1是你的树的id
					var id = node.id;
					var condIds = id.split("_");
					
					$(":hidden", $("#queryForm")).remove();
					
					var queryParams = "{";
					switch (condIds.length) {
						case 1:
				        	queryParams += "'bureauId': '" + condIds[condIds.length - 1] + "'";
				        	$("#queryForm").append("<input type='hidden' id='bureauId' name='bureauId' value='" + condIds[condIds.length - 1] + "'/>");
						break;
						case 2:
							queryParams += "'stationId': '" + condIds[condIds.length - 1] + "'";
				            $("#queryForm").append("<input type='hidden' id='stationId' name='stationId' value='" + condIds[condIds.length - 1] + "'/>");
						break;
						case 3:
							queryParams += "'lineId': '" + condIds[condIds.length - 1] + "'";
				             $("#queryForm").append("<input type='hidden' id='lineId' name='lineId' value='" + condIds[condIds.length - 1] + "'/>");
						break;
						case 4:
							queryParams += "'terminalId': '" + condIds[condIds.length - 1] + "'";
				             $("#queryForm").append("<input type='hidden' id='terminalId' name='terminalId' value='" + condIds[condIds.length - 1] + "'/>");
						break;
					}
					
					queryParams += ",'terminalAddr':'" + $("#terminalAddr", $("#queryForm")).val() + "'}";
					$('#terminalDatagrid').datagrid({
		                pageNumber: 1,
		                queryParams: eval("(" + queryParams + ")")
		            });
				}
			});
		});
		
--></script>
	</head>

	<body>
		<div id="addOrEditWin" class="easyui-window"
			style="padding: 10px; width: 680px; height: 350px;" closed="true"
			maximizable="false" minimizable="false" collapsible="false">
			<div id="formDiv" style="text-align: align;">
				<form id="form" method="post">
					<input type="hidden" id="terminalId" name="terminalId" />
					<table class="editTable">
						<tr>
							<td class="tdText">
								终端地址
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="terminalAddr" name="terminalAddr" required="true" />
							</td>
							<td class="tdText">
								通信模式
							</td>
							<td>
								<input id="mode" class="easyui-combobox" name="mode"
									style="width: 200px;"
									data-options="
										valueField: 'value',
										textField: 'label',
										data: [{
											label: 'TCP',
											value: '0'
										},{
											label: 'UDP',
											value: '1'
										},{
											label: '拨号',
											value: '2'
										}]" />

							</td>
						</tr>
						<tr>
							<td class="tdText">
								心跳周期（分钟）
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="heartBeatPeriod" name="heartBeatPeriod" required="true" />
							</td>
							<td class="tdText">
								超时周期（分钟）
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="timeOut" name="timeOut" required="true" />
							</td>
						</tr>
						<tr>
							<td class="tdText">
								主站IP
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text" id="ip"
									name="ip" required="true" />
							</td>
							<td class="tdText">
								主站端口
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="port" name="port" required="true" />
							</td>
						</tr>
						<tr>
							<td class="tdText">
								APN用户名
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="apnUsername" name="apnUsername" required="true" />
							</td>
							<td class="tdText">
								APN密码
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="apnPwd" name="apnPwd" required="true" />
							</td>
						</tr>
						<tr>
							<td class="tdText">
								安装位置
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="location" name="location" required="true" />
							</td>
							<td class="tdText">
								资产编号
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="assetNo" name="assetNo" required="true" />
							</td>
						</tr>
						<tr>
							<td class="tdText">
								类型
							</td>
							<td>
								<input id="type" class="easyui-combobox" name="type"
									style="width: 200px;"
									data-options="
										valueField: 'value',
										textField: 'label',
										data: [{
											label: '架空型',
											value: '0'
										},{
											label: '电缆型',
											value: '1'
										},{
											label: '太阳能型',
											value: '2'
										}]" />
							</td>
							<td class="tdText">
								是否挂载
							</td>
							<td>
								<input id="isUsed" class="easyui-combobox" name="isUsed"
									style="width: 200px;"
									data-options="
										valueField: 'value',
										textField: 'label',
										data: [{
											label: '否',
											value: '0'
										},{
											label: '是',
											value: '1'
										}]" />
							</td>
						</tr>
						<tr>
							<td class="tdText">
								无线模块地址
							</td>
							<td>
								<input class="easyui-validatebox inputText" type="text"
									id="wirelessAddr" name="wirelessAddr" required="true" />
							</td>
							<td class="tdText">
								所属供电局
							</td>
							<td>
								<input id="bureauId" name="bureauId" class="easyui-combobox"
									style="width: 200px;"
									data-options="mode:'remote',required:true,valueField:'bureauId',textField:'bureauName',url:'../archives/showAllBureaus.action',
									onSelect: function(rec){  
										$('#stationId').combobox('clear');
										$('#lineId').combobox('clear');
						            	var url = '../archives/showStationsBelonged.action?bureauId=' + rec.bureauId;  
						            	$('#stationId').combobox('reload', url);  
						        	}">
							</td>
						</tr>
						<tr>
							<td class="tdText">
								所属供电所
							</td>
							<td>
								<input id="stationId" name="stationId" class="easyui-combobox"
									style="width: 200px;"
									data-options="mode:'remote',required:true,valueField: 'stationId',textField: 'stationName',onSelect: function(rec){  
										$('#lineId').combobox('clear');
						            	var url = '../archives/showLinesBelonged.action?stationId=' + rec.stationId;  
						            	$('#lineId').combobox('reload', url);  
						        	}">
							</td>
							<td class="tdText">
								所属线路
							</td>
							<td>
								<input id="lineId" name="lineId" class="easyui-combobox"
									style="width: 200px;"
									data-options="mode:'remote',required:true,valueField: 'lineId',textField: 'lineName'">
							</td>
						</tr>
						<tr>
							<td colspan="4" align="center">
								<a class="" id="addOrEditBtn" href="javascript:void(0)"></a>
								<a class="easyui-linkbutton" iconCls="icon-cancel"
									id="addOrEditsstn" href="javascript:void(0)"
									onclick="winClose('addOrEditWin')">取消</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<div style="display: inline; width: 100%;">
			<div style="float: left; width: 15%;">
				<ul id="tree" class="easyui-tree"
					data-options="url: '../archives/showAsyncLineTree.action',lines: true">
				</ul>
			</div>
			<div style="width: 84%; float: left; margin-left: 8px;">
				<s:form theme="simple" id="queryForm" cssClass="queryForm">
					<table class="queryTable">
						<tr>
							<td class="tdText">
								终端地址
							</td>
							<td>
								<s:textfield name="terminalAddr" id="terminalAddr"
									cssClass="inputText"></s:textfield>
							</td>
							<td class="tdQueryBtn" align="center">
								<input type="button" value="查询" class="queryBtn"
									id="queryBtnFunc" />
							</td>
						</tr>
					</table>
				</s:form>
				<table id="terminalDatagrid">
				</table>
			</div>
		</div>
	</body>
</html>
